<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="http://localhost:3000/admin/plugins/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="http://localhost:3000/admin/css/main.css" />

</head>

<body>
<div style="margin: 15px;">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>添加删除轮播图</legend>
	</fieldset>
	<form enctype="multipart/form-data" >
    <input type="file" name="upload" multiple="multiple">
    <!--<input type="submit" value="Upload file" />-->
    <button id="submit">上传</button>
</form>
	<!--<form class="layui-form" action="">
		<div class="layui-form-item">
			<label class="layui-form-label">姓名</label>
			<div class="layui-input-block">
				<input type="text" id="name" name="name"  autocomplete="off" placeholder="请输入姓名" class="layui-input">
			</div>
		</div>


		<div class="layui-form-item">
			<label class="layui-form-label">图片</label>
			<div class="layui-input-block">
				<div class="file-box">
    <img id="preview" />
    <input type="text" id="imgfield" class="txt" placeholder="预览">
    <input type="file" name="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)" >  
</div>

				<button class="layui-btn" lay-submit="" id="add1">立即提交</button>
			</div>
		</div>


		<div class="layui-form-item">
			<label class="layui-form-label">部门</label>
			<div class="layui-input-block">
				<input type="text" id="department" name="department"  autocomplete="off" placeholder="请输入部门" class="layui-input">
			</div>
		</div>




		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit="" id="add">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>-->
	<table class="layui-table" style="width: 1200px;">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>序号</th>
      <th>图片</th>
      <th>操作</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><img src="" class="img"/></td>
      <td><button onclick="delCarousel()" class="delC">删除</button></td>
    </tr>
  </tbody>
</table>
</div>
<style type="text/css">
	.img{width: 300px;height: 300px;}
	.delC{width: 100px;height: 40px;}
</style>
<script type="text/javascript" src="http://localhost:3000/admin/plugins/layui/layui.js"></script>
<script>
	
	function delCarousel(){
		layer.confirm("你确认删除这张轮播图吗",function(){
			alert(1)
		})
	}
	layui.use(['form', 'laydate','upload'], function() {
		var form = layui.form(),
				layer = layui.layer,
				laydate = layui.laydate,
				$= layui.jquery;

	$.post("http://localhost:3000/admin/get_carousel",{},function(data){
		console.log(data)
		var data=data.carousel;
		for(var i=0;i<data.length;i++){
		$(".layui-table tbody").append(' <tr><td>'+(i+1)+'</td><td><img src="'+contextPath+"/"+data[i].url+'" class="img"/></td><td><button onclick="delCarousel('+data[i]._id+')" class="delC">删除</button></td></tr>')
		}
	})
 $("#submit").on("click",function(){
		var form = new FormData($("form")[0]);  
		console.log(form)
		layer.alert('上传中，请勿进行任何操作');
		if(form){
    $.ajax({  
        url: "http://localhost:3000/upload",  
        type: "post",  
        data: form,  
        dataType: "multipart/form-data",  
        processData: false,  
        contentType: false,  
        async: false,  
        success: function (res) { 
        	layer.alert("上传成功")
        }  
    })  
   }else{
   	layer.alert("请上传文件");
   }
    })
		//监听提交
		//点击添加分类
		$('#add').on('click', function() {
			var name=$("#name").val();
			var time=$("#time").val();
			var department=$("#department").val();
			//测试用户是否录入信息
			if(name==""||time==""||department==""){
				layer.alert('请填入相关信息', {icon: 2});
				return;
			}
			$.post("http://localhost:3000/admin/add_quit",{name:name,time:time,department:department},function(result){
				if(result.status==="success"){
					layer.alert('添加成功,请在离职公示列表查看。', {icon: 1});
				}else{
					layer.alert('添加失败', {icon: 2});
				}
			});
			//这句话的意思不会刷新当前页面。避免清空内容
			return false;
		});
	});
	
	function imgPreview(fileDom) {
    //判断是否支持FileReader
    if(window.FileReader) {
        var reader = new FileReader();
    } else {
        alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
    }
    //获取文件
    var file = fileDom.files[0];
    var imageType = /^image\//;
    //是否是图片
    if(!imageType.test(file.type)) {
        alert("请选择图片！");
        return;
    }
    //读取完成
    reader.onload = function(e) {
        //获取图片dom
        var img = document.getElementById("preview");
        //图片路径设置为读取的图片
        img.src = e.target.result;
    };
    reader.readAsDataURL(file);
}


</script>
</body>
<style type="text/css">
	.file-box {
    position: relative;
    display: inline-block;
}
.file-box img {
    display: inline-block;
    border: none;
}
.file-box .txt,.file-box .file {
    width: 70px;
    height: 36px;
    position: absolute;
    top: -20px;
    left: 100px;
    text-align: center;
}


</style>
</html>